<template>
  <div class="v-hyperlinkSelect-select g-jc-sb g-pd-l-8">
    <div class="g-one-line content">
      <template v-if="valueData">
        <img
          v-if="valueData.icon"
          class="g-m-r-4"
          style="height: 16px"
          :src="valueData.icon"
        />
        <span v-if="valueData.name">{{ valueData.name }}</span>
      </template>
    </div>

    <div
      v-if="selected && !row.readonly && !isModelDisabled && !tableElementDisabled"
      class="g-pd-r-4 img-btn"
    >
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { HyperLinkInfo, PropertyRow } from "../../types";
import { ref, Ref, inject, watch } from "vue";
import { modelDetail } from "@/modules/model/modals/modelDetail";
import { modelService } from "@/modules/model/service";
import { LinkType } from "@/constants/Enums";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 模型单选-树选择弹窗
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  tableElementDisabled?: boolean;
}>();

const valueData = ref<{ name: string; icon: string } | undefined>(undefined);
watch(
  () => props.row.value,
  async newVal => {
    const value = JSON.parse((newVal as string) || "{}") as HyperLinkInfo;
    if (value.activeId) {
      const link = value.links.find(it => it.id === value.activeId);
      if (link && link.type === LinkType.URL) {
        valueData.value = {
          icon: "/statics/icons/attrTip/iconlink.svg",
          name: link.url
        };
      } else if (link && link.type === LinkType.FILE) {
        valueData.value = {
          icon: "/statics/icons/attrTip/iconfile.svg",
          name: link.url
        };
        if (link.url.endsWith(".jpg") || link.url.endsWith(".png") || link.url.endsWith(".gif") || link.url.endsWith(".svg")) {
          valueData.value = {
            icon: "/statics/icons/attrTip/iconpng.svg",
            name: link.url
          };
        }
      } else if (link && link.type === LinkType.MODEL) {
        const model = await modelService.getModelData(app.activeProject!.id, link.url);
        if (model) {
          valueData.value = {
            icon: model.icon,
            name: model.name
          };
        } else {
          valueData.value = undefined;
        }
      }
    } else {
      valueData.value = undefined;
    }
  },
  { immediate: true }
);

const handleClick = () => {
  if (app.global.isIpcWindow) {
    app.activeProject!.attributeTabsModel?.changeActiveTab("hyperlink");
  } else {
    let profileRootModelId = "";
    if (app.activeProject?.config) {
      profileRootModelId = app.global.profileEditProjectIdMapModel.profileNameToProfileModelIdMap.get(
        app.activeProject?.config?.profileName
      ) as string;
    }
    modelDetail.popup({ projectId: app.activeProject!.id, modelId: props.row.modelId, activeKey: "hyperlink", profileRootModelId });
  }
};
</script>
<style lang="scss" scoped>
.v-hyperlinkSelect-select {
  height: 100%;
  .content {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    > span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  > .img-btn {
    display: flex;
    align-items: center;
  }
}
</style>
